<template>
	<view class="content">
		<view class="pageHeader">
			文件详情
			<a class="generalBack" @click="backpage()" hover-class="none">
			 <image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			 </a>
		</view>
		<view class="regoodbox">
			<view class="flex aic sort" style="background-color: #fff;border-bottom: 2upx solid #eee;margin-bottom:4upx;">
				<view v-for="(item,index) in topchoose" :key="index" @click="change(index)" class="flex-1">
					<view class="flex  aic jc-center" style="color: #999;">
						<text style="font-size: 30upx;margin-left:6upx;padding:26upx 0 " :class="index==topindex?'topactive':''">{{item}}</text>
					</view>
				</view>
			</view>
			
			<!-- 文件概况 -->
			<view v-if="topindex==0">
				<view style="background-color: #fff;padding:0 28upx;font-size: 28upx;color: #333;">
					<view style="padding:12upx 0;color: #666;border-bottom: 2upx solid #eee;">公司信息</view>
					<view style="padding: 20upx 0;" class="flex aic jsb">
						<text>文件名称</text>
						<text>{{filemsg.title}}</text>
					</view>
					<view style="padding: 20upx 0;" class="flex aic jsb">
						<text>文件代码</text>
						<text>{{filemsg.code}}</text>
					</view>
					<view style="padding: 20upx 0;" class="flex aic jsb">
						<text>发行日期</text>
						<text>{{faxingtime}}</text>
					</view>
				</view>
				<view style="background-color: #fff;padding:0 28upx;font-size: 28upx;color: #333;margin-top: 20upx;">
					<view style="padding:12upx 0;color: #666;border-bottom: 2upx solid #eee;">比例分布</view>
					<view class="flex aic jsb">
						<view>
							<view style="padding: 8upx 0;" class="flex aic">
								<text class="leftsqure squre-1"></text>
								<text style="margin: 0 50upx 0 10upx;">发行数量</text>
								<text>{{filemsg.file_sum}}</text>
							</view>
							<view style="padding: 8upx 0;" class="flex aic">
								<text class="leftsqure squre-2"></text>
								<text style="margin: 0 50upx 0 10upx;">发放数量</text>
								<text>{{filemsg.grant_files}}</text>
							</view>
							<view style="padding: 8upx 0;" class="flex aic">
								<text class="leftsqure squre-3"></text>
								<text style="margin: 0 50upx 0 10upx;">今日分红</text>
								<text>{{filemsg.dividend_today}}</text>
							</view>
						</view>
					</view>
				</view>

				<view style="background-color: #fff;padding:0 ;font-size: 28upx;color: #333;margin-top: 20upx;width: 100%;">
					<view style="padding:12upx 0;color: #666;border-bottom: 2upx solid #eee;padding-left: 28upx;">文件详情</view>
					<view style="max-width: 100%;padding: 0 28upx;" >

						<!-- <text style="color:#EC6104;">查看更多>></text> -->
						<view style="padding: 16upx 0;" v-html="filemsg.file_introduce">
							
						</view>
					</view>
				</view>
			</view>
			<!-- 分红送配 -->
			<view v-else>
				<view v-for="(item,index) in fileList" :key="index" class="filebox">
					<view class="flex aic jsb">
						<view>分红份数:{{item.number}}</view>
						<view>分红金额: <text style="color: #EC6104;">￥{{item.price}}</text></view>
					</view>
					<view style="margin-top: 26upx;color: #999;font-size: 26upx;">分红日期:{{item.add_time_time}}</view>
				</view>
			</view>
		</view>
	</view>
	</template>
	<script>
	import * as util from '../../common/util.js'
	import postAjax from '../../API/postAjax.js'
	export default {
		data() {
			return {
				userToken:'',// token
				fileList:[],
				filemsg:{},
				// 详情切换
				topchoose:['文件概况','分红送配'],
				topindex:0,
				faxingtime:'',// 发行日期
			}
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			that.getFileMsg(options.id)
			that.getFileFund(options.id)
		},
		methods: {
			// 返回上一页
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},
			//滚动到底部
			
			onReachBottom:function(){
				if(this.topindex ==1){
					this.getFileFund();
				}
			},
			change(index){
				this.topindex = index
			},
			// 获取分红详情
			getFileFund(id) {
				let that = this;
				uni.showNavigationBarLoading();
			
				let postdata = {
					id: id,
					m: 0,
					n: 20
				};
				let fileLog = [];
			
				postAjax('File/fileDividend', postdata, function(data) {
					console.log(data)
					if (data.code == 0) {
						fileLog = data.data;
			
						if (fileLog.length > 0) {
							that.fileList = that.fileList.concat(fileLog);
							that.page++; //每触底一次 page +1
						} else {					
							that.loadingText = '已加载全部';				
							
						}
						
						if(that.fileList.length<10){
							that.loadingText = '';
						}
			
					}else{
						//that.getFileFund(id)
					}
					uni.hideNavigationBarLoading();
				});
			},
			//获取文件详情
			getFileMsg(id) {			
				let that = this
				let postdata = {
					id:id,
				}	
				// http://app.wisili.com/index.php/api/file/fileinfo
				postAjax('file/fileinfo',postdata,function(data){
					if (data.code == 0) {
						that.filemsg = data.data[0]
						let ftime =  data.data[0].add_time
						that.faxingtime =  util.formatTimes(ftime,'Y-M-D h:m:s')
					}else{
						uni.showToast({
							icon:'none',
							title:'文件加载失败，请稍后重试'
						})
					}
				})
				
			}
		}
	}
	
</script>

<style>
	.content{min-height: 100vh;background-color: #F9F9F9;}
	.pageHeader{width: 100%;height: 128upx;background-color: #1D84E8;line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;}
	.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
	.regoodbox{padding: 0upx 0upx 22upx;}
	.flex-1{flex:1;}
	.eliplis{overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
	.topactive{color: #1D84E8;position: relative;}
	.topactive::after{content: '';position: absolute;width: 100%;height: 4upx;background-color: #1D84E8;bottom: 0;left: 0;}
	.leftsqure{width: 18upx;height: 18upx;}
	.squre-1{background-color: #DF7A4C;}
	.squre-2{background-color: #E5B549;}
	.squre-3{background-color: #2E6DB7;}
	.filebox{
		padding:24upx 30upx;font-size: 28upx;color: #666;background-color: #fff;margin-bottom: 10upx;
	}
</style>
